<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*
			H:\尚硅谷前端学科全套教程\1.前端学科--基础阶段\尚硅谷HTML+CSS教程\视频\视频4 《77.尚硅谷_HTML&CSS基础_按钮练习》
			这里可以这样添加伪类
			居然能够这样设置，我还以为只有a才这样做。
			*/
		   
		   /*
		   刷新页面之后，鼠标经过图片会闪一下
		   原因：
			背景图片是外部资源加载进入网页，浏览器加载一次，就要发一次请求。
			当前网页要发四次请求。一次网页本身的请求，三次按钮的图片资源请求。
			但是这些资源，只有在被使用的时候才会加载。
			也就是鼠标经过按钮才加载资源 hover.png。
			
			将三张图片放一起。移动位置。
			这种技术叫做css-sprite，很像unity3d
		   */
		  
		  
			.btn:link {
				/*
				a 转换为块元素
				*/
				display: block;
				/*
				背景图片不重复
				*/
				background-repeat: no-repeat;
				width: 93px;
				height: 29px;
				background-image: url(img/btn/btn.png)
			}
			
			.btn:hover {
				/* background-image: url(img/btn/btn.png) */
				background-position: -93px;
			}
			
			.btn:active{
				/* background-image: url(img/btn/btn.png) */
				background-position: -186px;
			}
		</style>
	</head>
	<body>
		<a href="#" class="btn"></a>
	</body>
</html>
